<template>
    <div class="setself">
        <header-tab msg="我的账户" isPhone="3"></header-tab>
        <div class="info">
            <div class="selfList">
                <div class="headImg" @click="goUploadImg">
                    <uplaod :imgurl="infoForm.avatar" @uploadImgEdit="uploadImgEdit"></uplaod>
                </div>

                <!--            <group>-->
                <!--                <popup-picker title="性别" @on-hide="editGender" popup-title="请选择性别" :data="gender" placeholder="请选择性别" v-model="infoForm.genders"></popup-picker>-->
                <!--            </group>-->

                <!--            <group>-->
                <!--                <datetime title="生日" :min-year="1900" @on-confirm="editBirthday" popup-title="请选择生日" :data="birthdays" placeholder="请选择生日" v-model="infoForm.birthday"></datetime>-->
                <!--            </group>-->

                <!--            <div class="infoaddress" @click="handleAddress">-->
                <!--                <group>-->
                <!--                    <popup-picker disabled title="地区" :columns="2" popup-title="请选择地区" @on-show="changeshowCity" @on-shadow-change="changeCity" :data="addressData" placeholder="请选择地址" v-model="msg"></popup-picker>-->
                <!--                </group>-->
                <!--            </div>-->

                <!--            <div v-if="cityNo">-->
                <!--                <three-address @cancel="handleCancel" @complete="complete" @provice="provice" @city="city" :showFlag="showFlag" :cityNo="cityNo"></three-address>-->
                <!--            </div>-->
            </div>
            <div class="loginOut" @click="loginOut">退出登录</div>
            <login-out @showCancelLogin="cancelLogin" :showFlag="loginShow"></login-out>
        </div>


    </div>
</template>

<script>
import HeaderTab from '@/components/HeaderTab'
import ThreeAddress from './component/ThreeAddress'
import {
    XTextarea,
    Group,
    XAddress,
    PopupPicker,
    Datetime,
    Picker
} from 'vux'
import LoginOut from '@/components/LoginOut'
import {
    setAllToken,
    removeAllToken,
    removeAllTokenOld,
    getAllToken
} from '@/utils/auth'
import {
    memberInfo,
    memberInfoEdit,
    memberCity
} from '@/api/index'
import Uplaod from '@/components/uplaod'

export default {
    data() {
        return {
            headImgUrl: 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png',
            loginShow: false,
            msg: ["", ""],
            infoForm: {
                gender: [],
                avatar: 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png'
            },
            gender: [
                ['男', '女']
            ],
            birthdays: [],
            addressData: [],
            addressDatas: [],
            changeAddress: true,
            showFlag: false,
            cityNo: '',

        }
    },
    components: {
        HeaderTab,
        [XTextarea.name]: XTextarea,
        Group,
        [XAddress.name]: XAddress,
        PopupPicker,
        Datetime,
        LoginOut,
        Uplaod,
        [Picker.name]: Picker,
        ThreeAddress
    },
    mounted() {

        this.getInfos();
        // this.getCitys();
    },
    methods: {
        provice(val) {
            this.msg.splice(0, 1, val);
        },
        city(val) {
            this.msg.splice(1, 1, val);
        },
        handleAddress() {
            if (!this.cityNo) {
                this.cityNo = '0';
            }
            this.showFlag = true;
        },
        complete(val) {
            if (val.cityVal) {
                this.infoForm.cityNo = val.provinceVal.provinceid + "," + val.cityVal.cityid;
            } else {
                this.infoForm.cityNo = val.provinceVal.provinceid;
            }

            this.handleEdit(val);
        },
        handleCancel() {
            this.showFlag = false;
        },
        uploadImgEdit(val) {
            this.infoForm.avatar = val;
            this.handleEdit();
        },
        goUploadImg() {
            // this.$router.push("/setSelf/uploadImg")
        },
        loginOut() {
            this.loginShow = true;
        },
        cancelLogin(val) {
            this.loginShow = false;
            if (val == 2) {
                // 确认退出登录 loginout
                this.$store.dispatch('loginout', 1);
                this.$store.dispatch('Loginout', 1);
                this.isLogin = false;
                this.$store.state.user.memberNo == '';
                this.$store.state.shop.shopList == [];
                this.$store.state.shop.shopMap == {};
                this.$store.state.shop.totalShopNum == 0;
                removeAllToken("memberNo");
                localStorage.removeItem("shopList");
                localStorage.removeItem("shopMap");
                // localStorage.removeItem("memberNo");
                localStorage.removeItem("totalShopNum");
                // this.$router.go(-1);
                this.$router.replace("/self/index");
            }
        },
        editName() {
            // sessionStorage.setItem("myselfInfo",JSON.stringfy(this.infoForm));
            sessionStorage.setItem('myselfInfo', JSON.stringify(this.infoForm))
            this.$router.push({
                path: "/setSelf/name",
                name: 'name'
            })
        },
        editGender(val) {
            if (val) {
                this.infoForm.gender = this.infoForm.genders[0] == "男" ? "1" : '0';
                this.handleEdit();
            }
        },
        editBirthday() {
            this.handleEdit();
        },

        changeshowCity(val) {
        },
        changeCity(val) {
        },

        getCitys(cityNo) {
            let para = {
                "cityNo": cityNo, //类型：String  必有字段  备注：位置编码
            }
            memberCity(para).then((res) => {
                if (res.data.code == '000') {
                    let addressData = [];
                    res.data.content.map((item, index) => {
                        let obj = {
                            name: item.province,
                            value: item.provinceid,
                            parent: 0
                        };
                        addressData.push(obj)
                    })
                    this.addressData.splice(0, 1, addressData);
                    //  this.addressData = res.data.content;
                } else {
                    this.$vux.toast.show({
                        text: '网络异常，稍后重试'
                    })
                }
            }).catch((err) => {
                // alert(err);
            });
        },
        getInfos() {
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段  备注：广告位置编码
            }
            memberInfo(para).then((res) => {
                if (res.data.code == '000') {
                    if (res.data.content) {
                        this.infoForm = res.data.content;
                        this.cityNo = this.infoForm.cityNo;
                        if (!this.infoForm.avatar) {
                            this.infoForm.avatar = 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png'
                        }
                        let gender = [];
                        if (this.infoForm.gender == 1) {
                            gender.push("男")
                        } else {
                            gender.push("女")
                        }

                        this.$set(this.infoForm, "genders", gender);
                    }
                } else {
                    this.$vux.toast.show({
                        text: '网络异常，稍后重试'
                    })
                }
            }).catch((err) => {
                // alert(err);
            });
        },
        handleEdit(val) {
            if (!this.msg) {
                this.$vux.toast.text('信息不能为空', 'middle');
                return
            }
            // this.$router.push("/feedBack/success");
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段  备注：广告位置编码
                'memberName': this.infoForm.memberName,
                'avatar': this.infoForm.avatar == "https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png" ? "" : this.infoForm.avatar,
                'birthday': this.infoForm.birthday,
                'gender': this.infoForm.gender,
                'cityNo': this.infoForm.cityNo,
            }
            memberInfoEdit(para).then((res) => {
                if (res.data.code == '000') {
                    this.$vux.toast.text("保存成功", 'middle');
                    this.handleCancel();

                    if (val) {
                        this.msg.splice(0, 1, val.provinceVal.province);
                        this.msg.splice(1, 1, val.cityVal.city);
                    }
                } else {
                    this.$vux.toast.show({
                        text: '网络异常，稍后重试'
                    })
                }
            }).catch((err) => {
                // alert(err);
            });
        }

    }
}
</script>
<style lang="less">
.setself {
    .headImg {
        width: 100%;
        margin: 6.66vw auto 0;
        // border-bottom:1px solid #d9d9d9;
        padding-bottom: 6.66vw;

        img {
            width: 26.87vw;
            height: 26.87vw;
            margin: 0 auto;
            display: block;
        }
    }

    .selfInfo {
        width: 100%;
        height: 14.933vw;
        margin-top: 0.533vw;
        padding: 5.33vw;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        background: #fff;
        border-top: 1px solid #F8FAFD;

        .selfInfoIcon {
            color: #2E2E2E;
            font-size: 4.53vw;
            display: flex;
            justify-content: center;
            line-height: 5.33vw;

        }

        .selfArrow {
            width: 2vw;
            height: 3.33vw;
            margin-top: 1vw;
        }

        .title {
            margin-right: 4vw;
        }
    }

    .weui-cell {
        padding: 5.33vw;
    }

    .weui-cells:after {
        border-bottom: none;
    }

    .vux-no-group-title {
        margin: 0;
    }

    .vux-cell-value {
        color: #2E2E2E;
    }

    .loginOut {
        width: 100%;
        height: 14.93vw;
        line-height: 14.93vw;
        font-size: 4.53vw;
        text-align: center;
        color: #2E2E2E;
        background: rgba(255, 255, 255, 1);
        border-top: 1.5vw solid #F8FAFD;
        border-bottom: 1.5vw solid #F8FAFD;
    }

    .weui-cell__ft {
        color: #2E2E2E;
    }

    .v-transfer-dom .vux-popup-header-right,
    .v-transfer-dom .dp-header .dp-item.dp-right {
        color: #2AB32F !important;
    }

    .infoaddress .vux-popup-picker-value {
        padding-right: 13px;
    }

    .infoaddress .vux-popup-picker-select:after {
        content: " ";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #C8C8CD;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        // top: -2px;
        position: absolute;
        top: 50%;
        // margin-top: -4px;
        right: 2px;
    }
}

.v-transfer-dom .vux-popup-header-right,
.v-transfer-dom .vux-popup-header-left,
.dp-container .dp-header .dp-left,
.dp-container .dp-header .dp-right {
    color: #2AB32F !important;
}
</style>